<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>-->
    <script src="/static/axios.min.js"></script>
    <link href="/static/my.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div>
        <input id="name" placeholder="请输入学生姓名" />
        <input id="sex" placeholder="请输入学生性别" />
        <input id="classId" type="number" placeholder="请输入学生班级ID" />
        <button onclick="insert()">插入学生信息</button>
    </div>
    <div>
        <input id="searchName" th:value="${bbb}" placeholder="请输入模糊查询学生姓名" />
        <input id="age" placeholder="根据年龄查询" />
        <button onclick="search()">查询</button>
    </div>
    <div>
        <div style="display: flex;flex-direction: row;">
            <div style="width: 100px;" class="color-b">ID</div>
            <div style="width: 100px;">头像</div>
            <div style="width: 100px;" class="color-b">姓名</div>
            <div style="width: 100px;" class="color-b">性别</div>
            <div style="width: 100px;" class="color-b">年龄</div>
            <div style="width: 100px;" class="color-b">班级ID</div>
        </div>
        <div th:each="item : ${aaa}" style="display: flex;flex-direction: row;">
            <div style="width: 100px;" th:text="${item.id}"></div>
            <div style="width: 100px;">
                <img th:src="${item.touxiang}" style="width: 50px;height: 50px"/>
            </div>
            <input style="width: 100px;" th:value="${item.name}" th:id="${item.id}"></input>
            <div style="width: 100px;" th:text="${item.sex}"></div>
            <div style="width: 100px;" th:text="${item.age}"></div>
            <div style="width: 100px;" th:text="${item.classId}"></div>
            <button th:onclick="|update(${item.id})|" >更新</button>
            <button th:onclick="|deletes(${item.id})|">删除</button>
        </div>
        <img src="/static/aa.jpg"/>
    </div>
    <script>
        function deletes(id) {
            axios
                .get('http://localhost:8080/student/deleteJpa?id=' + id)
                .then(response => {
                    alert(response.data)
                    //删除完成后刷新列表
                    window.location.reload()
                })
        }
        //传ID过来，然后使用document.getElementById(id)获取对应的修改输入框的值
        function update(id){
            axios
                .get('http://localhost:8080/student/updateJpa?id=' + id+'&name='+document.getElementById(id).value)
                .then(response => {
                    alert(response.data)
                    //更新完成后刷新列表
                    window.location.reload()
                })
        }
        function insert() {//插入
            var name = document.getElementById("name").value;//获取插入里面名称输入框的值
            var sex = document.getElementById("sex").value;
            var classId = document.getElementById("classId").value;
            axios
                .get('http://localhost:8080/student/insertJpa?name=' + name + '&sex=' + sex + '&classId=' + classId)
                .then(response => {
                    alert(response.data)
                    //插入完成后刷新列表
                    window.location.reload()
                })
        }
        function search() { //模糊搜索
            var searchName = document.getElementById("searchName").value;
            var age = document.getElementById("age").value;
            if(age==""){//表示没有在年龄框输入任何值
                age  = 0;
            }
            window.location.href = "http://localhost:8080/toLoginPage1?name="+searchName+"&age="+age;
        }
    </script>
</div>
</body>
</html>